<template>
    <div>
        <div ref="echart" style="width:50%;height:400px;"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        this.createEcharts()
    },
    methods: {
        async createEcharts() {
            const res = await this.$http.get('/orderTotal')
            // console.log(res.data) 
            if (res.data.status != 'success') {
                this.$message.error('服务器错误')
                return
            } else {
                //将返回的数据转为echars需要的数组数据 [{ value: 1048, name: 'Search Engine' }], 
                let echartData = res.data.result.map((item) => { return { value: item.orderCounts, name: item._id } })
                //获取DOM容器 
                const echartDom = this.$refs.echart; if (echartDom) {
                    //实例化echarts 
                    const myChart = this.$echarts.init(echartDom)
                    //饼图配置信息option 
                    const option = {
                        title: {
                            text: '订单统计',
                            subtext: '9个订单模块',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        }, legend: {
                            orient: 'vertical',
                            left: 'left'
                        }, series: [{
                            name: '用户发单数量',
                            type: 'pie',
                            radius: '50%',
                            data: echartData,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }]
                    };
                    //应用option配置 
                    myChart.setOption(option)
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>

</style>